import React, {Component} from "react";
import axios from 'axios';
import 'katex/dist/katex.min.css';
import { BlockMath } from 'react-katex';
import MenuHead from '../comm/menuHead';

class Pyshell extends Component {
    state = {
        input: "",
        output: " ",
        curt_tag: "text",
    }
    handleChange = (e) => {
        this.setState({
            input: e.target.value,
        })
    }
    runShell = () => {
        axios.post("/flask/pyshell", {
            "data": this.state.input,
        }).then((res) => {
            this.setState({
                output: res.data.data,
            })
        }).catch((err) => {
            alert(err)
        })
    }
    switchTag = (id) => {
        this.setState({
            curt_tag: id,
        })
    }
    render() {
        let isTextShow = this.state.curt_tag === "text" ? "block" : "none";
        let isPlotingShow = this.state.curt_tag === "ploting" ? "block" : "none";

        let textStyle = this.state.curt_tag === "text" ? "#99d9ea" : "#f7f7f7";
        let plotingStyle = this.state.curt_tag === "ploting" ? "#99d9ea" : "#f7f7f7";
        return (
            <div align="center">
                <MenuHead/>
                <div>
                    <h4>Python Online Shell</h4>
                </div>
                <div>
                    <textarea rows='15' cols='40' id='expr' onChange={this.handleChange}></textarea>
                </div>
                <div>
                    <table>
                    <tbody>
                    <tr>
                        <td><span style={{background: `${textStyle}`}} onClick={() => this.switchTag("text")}>文本</span></td>
                        <td width='5'></td>
                        <td><span style={{background: `${plotingStyle}`}} onClick={() => this.switchTag("ploting")}>ploting</span></td>
                        <td width='5'></td>
                        <td width='5'></td>
                        <td><button onClick={this.runShell}>Run</button></td>
                    </tr>
                    </tbody>
                    </table>
                </div>
                <div style={{display: `${isTextShow}`}}>
                    <textarea rows='12' cols='40' value={this.state.output} readOnly="readOnly"></textarea>
                </div>
                <div style={{display: `${isPlotingShow}`}}>
                    <BlockMath math={this.state.output} errorColor={'#cc0000'} />
                </div>
            </div>
        )
    }
}

export default Pyshell;
